<template>
  <!-- item组件 负责路由跳转 -->
  <div class="xtx-bread-item">
    <!-- 有to属性 渲染一个支持路由跳转的样子 router-link -->
    <!-- 没有to属性 渲染一个纯文本的样子 -->
    <template v-if="to">
      <router-link :to="to">
        <slot/>
      </router-link>
    </template>
    <template v-else>
      <span>
        <slot />
      </span>
    </template>
    <!--
      顶层组件和底层组件的关系
      provide / inject
      顶层组件 provide 提供数据
      底层组件 inject 接收数据
     -->
    <i class="iconfont">{{seperator}}</i>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'XtxBreadItem',
  props: {
    to: {
      type: String
    }
  },
  setup () {
    const seperator = inject('seperator')
    console.log(seperator)
    return {
      seperator
    }
  }
}
</script>
<style lang="less" scoped>
  .xtx-bread-item{
    // 最后一个i隐藏
    &:nth-last-of-type(1){
      i{
        display: none;
      }
    }
  }
</style>
